<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: white;
            border: 1px solid black;
            margin: 10px auto;
            position: relative;
        }

        .center{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            /* transform: translate(-50%, -50%); */
            /* margin-left: -50px;
            margin-top: -50px; */
        }
    </style>
</head>
<body>
    <!-- 绝对定位元素 7 大特性

        绝对定位元素脱离文档流，释放原本所占据的空间，同时层级提升
        绝对定位的元素，相对离自己最近的定位祖先元素进行位置调整
        如果没有定位的祖先元素，则相对 body 进行位置调整
        行内元素加上定位后，其具有行内块元素特性，支持宽高设置
        块级元素 没有设置宽度的情况下，如果加了绝对定位，宽度自动为内容宽
        margin:0 auto; 水平居中失效
        定位元素未设置宽高情况下，同时设置 top 和 bottom 会改变元素高，同时设置 left 和 right 会改变元素宽
        在元素设置宽高情况下，同时设置 top 与 bottom ,会以 top 值为主 bottom 不生效，同时设置 left 与 right，则以 left 为主，right 不生效 
        -->
    <div class="box">
        <div class="center"></div>
    </div>
</body>
</html>